<script setup lang="ts">
import { ref } from 'vue'
import { getAssetsImge } from '/@/utils/getImge'
import { useUserStore } from '/@/store'
import { useRouter } from 'vue-router'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

const user = useUserStore()
const router = useRouter()

const logout = () => {
  user.loginOut()
  console.log('执行了登出')
  router.push({ path: '/' })
}
</script>

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    router
    @select="handleSelect"
  >
    <el-menu-item class="item logo" index="0">
      <img
        style="width: 100px"
        :src="getAssetsImge('element-plus-logo.svg')"
        alt="Element logo"
      />
    </el-menu-item>

    <!--        <div class="flex-grow"/>-->
    <el-menu-item class="item index" index="1" route="/home/article">首页</el-menu-item>
    <!--        <el-menu-item class="item index" index="2" route="/home/dike">大坝管理</el-menu-item>-->
    <el-menu-item class="item index" index="2" route="/home/article">文章管理</el-menu-item>
    <!--        <el-menu-item class="item" index="2" route="/home/model">模型</el-menu-item>-->
    <div class="flex-grow" />
    <!--        <el-menu-item class="item" index="1">Processing Center</el-menu-item>-->

    <!--        <el-menu-item index="1">Processing Center</el-menu-item>-->
    <el-menu-item v-if="!user.isSign" class="item" index="/login">
      <el-button>登录</el-button>
    </el-menu-item>

    <el-menu-item v-if="user.isSign" class="item">
      <el-avatar :size="50" :src="user.avatar"></el-avatar>
    </el-menu-item>

    <el-sub-menu v-if="user.isSign" index="2">
      <template #title>{{ user.username }}</template>
      <el-menu-item index="/home/user">个人空间</el-menu-item>
      <el-menu-item @click="logout">登出</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped lang="scss">
.el-menu-demo {
  height: 70px;
}

.flex-grow {
  flex-grow: 1;
}

.item:hover {
  background-color: #fff !important;
}

.logo {
  margin-left: 15%;
}

.index {
  margin-left: 30px;
}
</style>